<template>
  <div class="v-slot-input">
    <div>
      <span
        v-if="icon"
        class="g-m-l-4"
      >
        <img
          :src="icon"
          style="height: 16px"
        />
      </span>
      <span
        v-if="name"
        class="g-m-l-4"
      >
        {{ name }}
      </span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { InstanceSlotData, SlotValue } from "../../types";
import { computed } from "vue";
import { SlotEditKey } from "@/constants/constants";

/**
 *
 */
const props = defineProps<{
  instanceId: string;
  projectId: string;
  slotData: InstanceSlotData;
  slotValue: SlotValue | undefined | null;
  slotKey: SlotEditKey;
  readonly?: boolean;
  isMultiplicity?: boolean;
  nullable?: boolean;
}>();

const icon = computed(() => {
  let str = "";
  if (props.slotValue && props.slotValue.model && props.slotValue.model.icon) {
    str = props.slotValue.model.icon;
  } else if (props.slotValue && props.slotValue.icon) {
    str = props.slotValue.icon;
  }
  return str;
});

const name = computed(() => {
  let str = "";
  if (props.slotValue && props.slotValue.model && props.slotValue.model.name) {
    str = props.slotValue.model.name;
  } else if (props.slotValue && props.slotValue.name) {
    str = props.slotValue.name;
  }
  return str;
});
</script>
<style lang="scss">
.v-slot-input {
  display: flex;
  flex-wrap: nowrap;
  height: auto;
  background-color: none;
  .el-input.is-disabled .el-input__inner {
    background-color: none;
    cursor: default;
  }
}
</style>
